<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="build/example.css">
    <link rel="stylesheet" href="build/jquery-weui.css">
    <link rel="stylesheet" href="build/weui.css">
    <script src="build/jquery-2.1.4.js"></script>
    <script src="build/jquery-weui.js"></script>

</head>
<body>
<!--头部标题-->
 <div class="weui-tab">
    <div class="nav">
      <p class="nav-p">豆瓣</p>
    </div>
     <!--body-->
     <!--1、index-->
     <div class="weui-tab__panel">
         <div class="weui-tab__content" style="display: block">
             <div class="weui-search-bar">
                 <form class="weui-search-bar__form">
                     <div class="weui-search-bar__box">
                         <i class="weui-icon-search"></i>
                         <input type="search" class="weui-search-bar__input" name="search" placeholder="搜索">
                         <a class="weui-icon-clear"></a>
                     </div>
                     <label class="weui-search-bar__label">
                         <i class="weui-icon-search"></i>
                         <span>搜索</span>
                     </label>
                 </form>
                 <a class="weui-search-bar__cancel-btn">取消</a>
             </div>
             <article class="weui-article">
                 <h1>我的关注</h1>
                 <section>
                     <div class="weui-grids">
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/1.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 电影
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/2.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 电视
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/3.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 图书
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/3.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 同城
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/2.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 小组
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/1.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 音乐
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/1.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 阅读
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/2.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 游戏
                             </label>
                         </div>
                         <div class="weui-grid">
                             <div class="weui-grid__icon">
                                 <img src="img/3.jpg" alt="">
                             </div>
                             <label  class="weui-grid__label">
                                 应用
                             </label>
                         </div>
                     </div>
                 </section>
             </article>
         </div>
         <!--read-->
         <div class="weui-tab__content">

             <div class="page_title" style="color: #000">- 阅读 -</div>
             <div class="page__bd">
                 <article class="weui-article weui-ar">
                         <section>
                             <a href="">
                                 <img src="img/5.jpg">
                                 <h2>逃避症患者生存指南</h2>
                                 <section>
                                     <h3 style="color: #aaa">可以说，我们的逃避症患者是爱好和平的</h3>
                                     <h5 style="color: #ccc">文/乔麦  2017/7/6</h5>
                                 </section>
                             </a>
                         </section>
                 </article>
                 <article class="weui-article weui-ar">
                     <section>
                         <a href="">
                             <img src="img/6.jpg">
                             <h2>逃避症患者生存指南</h2>
                             <section>
                                 <h3 style="color: #aaa">可以说，我们的逃避症患者是爱好和平的</h3>
                                 <h5 style="color: #ccc">文/乔麦  2017/7/6</h5>
                             </section>
                         </a>
                     </section>
                 </article>
                 <article class="weui-article weui-ar">
                     <section>
                         <a href="">
                             <img src="img/7.jpg">
                             <h2>逃避症患者生存指南</h2>
                             <section>
                                 <h3 style="color: #aaa">可以说，我们的逃避症患者是爱好和平的</h3>
                                 <h5 style="color: #ccc">文/乔麦  2017/7/6</h5>
                             </section>
                         </a>
                     </section>
                 </article>
                 <article class="weui-article weui-ar">
                     <section>
                         <a href="">
                             <img src="img/8.jpg">
                             <h2>逃避症患者生存指南</h2>
                             <section>
                                 <h3 style="color: #aaa">可以说，我们的逃避症患者是爱好和平的</h3>
                                 <h5 style="color: #ccc">文/乔麦  2017/7/6</h5>
                             </section>
                         </a>
                     </section>
                 </article>
             </div>
         </div>
         <!--film-->
         <div class="weui-tab__content">
             <div class="weui-search-bar">
             <form class="weui-search-bar__form">
                 <div class="weui-search-bar__box">
                     <i class="weui-icon-search"></i>
                     <input type="search" class="weui-search-bar__input" name="search" placeholder="搜索">
                     <a class="weui-icon-clear"></a>
                 </div>
                 <label class="weui-search-bar__label">
                     <i class="weui-icon-search"></i>
                     <span>搜索</span>
                 </label>
             </form>
             <a class="weui-search-bar__cancel-btn">取消</a>
         </div>
             <article class="weui-article">
                 <h1>电影</h1>
                 <div class="weui-grids">
                     <div class="weui-grid" style="text-align: center">
                         <img src="img/9.jpg" alt="">
                         <label class="weui-grid__label">
                             孤胆特工
                         </label>
                     </div>
                     <div class="weui-grid" style="text-align: center">
                         <img src="img/10.jpg" alt="">
                         <label class="weui-grid__label">
                             敢死队2
                         </label>
                     </div>
                     <div class="weui-grid" style="text-align: center">
                         <img src="img/11.jpg" alt="">
                         <label class="weui-grid__label">
                             机械师2
                         </label>
                     </div>
                     <div class="weui-grid" style="text-align: center">
                         <img src="img/12.jpg" alt="">
                         <label class="weui-grid__label">
                             傲娇与偏见
                         </label>
                     </div>
                     <div class="weui-grid" style="text-align: center">
                         <img src="img/13.jpg" alt="">
                         <label class="weui-grid__label">
                             爱乐女子天团
                         </label>
                     </div>
                     <div class="weui-grid" style="text-align: center">
                         <img src="img/14.jpg" alt="">
                         <label class="weui-grid__label">
                             大创业家
                         </label>
                     </div>
                 </div>
             </article>
         </div>
         <!--text-->
         <div class="weui-tab__content">
             <article class="weui-article">
                 <h1>
                     逃避症患者生存指南
                 </h1>
                 <section>
                     <h2>文/乔麦</h2>
                     <section>
                         <h3>1</h3>
                         <p>
                             去年年底的时候，面对公司即将到来的新一轮人事变动，我收拾行李去了美国。每次知道公司有什么变化，总是想：“幸好我不在……”
                             之后总部就有年长的朋友好心提醒我：“你怎么搞的啊。听说在领导面前讲你坏话的人很多。”
                             虽然不清楚为什么会这样，事实上我跟大部分同事都没有来往，莫名其妙却经常听说什么人又讲了什么。每次听到这样的消息，我都当作没听见、不知道、不存在。
                             既不想去争辩，也不想去跟领导谈一谈，只希望这些人最好赶紧把我忘记。
                             并不是心胸广阔或者淡泊名利，而是……作为一个逃避性人格，完全不想去面对这些无聊的事情，只想着逃掉就好了。
                             逃避性人格总有一种天真。
                             比如我总想着：“一切看事实而不是看谁讲了什么。很多事情解释、辩解、讲道理根本没有必要。”
                             虽然现实再三显示世界没有这么美妙，但我总是这么想。
                             其实只是不想去正视这一切。
                         </p>
                         <img src="img/16.jpg">

                     </section>
                 </section>
             </article>
         </div>
     </div>

    <!--底部切换-->
     <div class="weui-tabbar">
         <div class="weui-tabbar__item weui-bar__item_on">
             <img class="weui-tabbar__icon" src="img/1.jpg" alt="">
             <p class="weui-tabbar__label">首页</p>
         </div>
         <div class="weui-tabbar__item">
             <img class="weui-tabbar__icon" src="img/2.jpg" alt="">
             <p class="weui-tabbar__label">阅读</p>
         </div>
         <div class="weui-tabbar__item">
             <img class="weui-tabbar__icon" src="img/3.jpg" alt="">
             <p class="weui-tabbar__label">电影</p>
         </div>
         <div class="weui-tabbar__item">
             <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
             <img class="weui-tabbar__icon" src="img/4.jpg" alt="">
             <p class="weui-tabbar__label">我的</p>
         </div>
     </div>
 </div>




 <script>
     $(function(){
         $('.weui-tabbar__item').on('click',function(){
             $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
             var index = $(this).index();
             $('.weui-tab__content').eq(index).show().siblings().hide();
         })
     })
 </script>
</body>

</html>